import React from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import classnames from 'classnames'
import {
  HistogramOutline,
  QuestionCircleOutline,
  MovieOutline,
  UserCircleOutline,
} from 'antd-mobile-icons'
import styles from './index.module.scss'

import RouterBeforeEach from '../router/RouterBeforeEach'

// 定义底部tabbar
const menus = [
  { id: 1, title: '首页', to: '/', icontype: HistogramOutline },
  {
    id: 2,
    title: '问答',
    to: '/question',
    icontype: QuestionCircleOutline,
  },
  { id: 3, title: '视频', to: '/video', icontype: MovieOutline },
  { id: 4, title: '我的', to: '/profile', icontype: UserCircleOutline },
]

export default function Layouts() {
  const location = useLocation()
  const navigator = useNavigate()
  // console.log(location)
  
  return (
    <div className={styles.root}>
      {/* 区域一：点击按钮切换显示内容的区域 */}
      <div className="tab-content">
        {/* <Outlet /> */}
        <RouterBeforeEach/>
      </div>
      {/* 区域二：按钮区域，会使用固定定位显示在页面底部 */}
      <div className="tabbar">
        {menus.map((menu) => {
          const selected = menu.to === location.pathname
          return (
            <div
              onClick={() => navigator(menu.to)}
              className={classnames(
                'tabbar-item',
                selected ? 'tabbar-item-active' : ''
              )}
              key={menu.id}>
              <menu.icontype></menu.icontype>
              <span>{menu.title}</span>
            </div>
          )
        })}
      </div>
    </div>
  )
}
